<template>
  <!-- 代金券选择 -->
  <div>
    <TopFilter refs="topFilter" :list="topFilterList" :cols="4" :collapse="false" @filterChange="hanldeSearch"></TopFilter>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchapi"
      :params="queryParam"
      :datakey="'list'"
      selectionType="multiple"
      :onCellChange="cellChangeHanle"
      :onSyncTableData="saveTdableList"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="handleRowSelectChange"
    ></FilterTable>
    <div class="btnWrap">
      <el-button @click="handleCancle">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
    <FormPanel ref="formPanel" :list="formList" labelWidth="130" :cols="2" :formType="type" :isSubmitBtn="false" @formChange="formChangeHandle" />
  </div>
</template>

<script>
import { getCouponList, updateCouponSaveList } from '@/api/finance/repair/receivables';
import { dictionary } from '@/utils/dictMixin';
import moment from 'moment';
import { relative } from 'path';
import { constants } from 'crypto';
// 汪俊峰2020年1月4日
// import { vinInformationTrigger } from '@/api/repair/repairReception/feesSettlement';

export default {
  mixins: [dictionary],
  props: {
    pIndex: {
      type: Number,
      default: -1
    },
    vin: Object
  },
  data() {
    return {
      topFilterList: this.cteateTopFilterList(),
      formList: this.createFormList(),
      columns: this.createTableColumns(),
      fetchapi: getCouponList,
      queryParam: { xhrAbort: true, vin: this.vin.VIN, balenceNo: this.vin.BALANCE_NO },
      dataList: [],
      selectedRowData: [], // 选中的table数据
      vipRow: {} // wjf 2020年1月4日
    };
  },
  mounted() {
    this.createBaseTable();
    console.log(this.vin.VIN, 'vin的值');
  },
  methods: {
    cteateTopFilterList() {
      return [
        {
          type: 'SELECT',
          label: '是否本卡',
          fieldName: 'vflag',
          initialValue: '0',
          itemList: [
            { text: '全部', value: '0' },
            { text: '否', value: '1' }
          ]
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '代金券编号',
          dataIndex: 'vcardNo',
          sorter: true,
          filter: true,
          width: 200,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '代金券分配ID',
          dataIndex: 'id',
          sorter: true,
          filter: true,
          width: 200,
          filterType: 'input',
          showOverflowTooltip: true,
          hidden: true
        },
        {
          title: '面值',
          dataIndex: 'namt',
          sorter: true,
          filter: true,
          width: 200,
          showOverflowTooltip: true,
          filterType: 'number'
        },
        {
          title: '到期日期',
          dataIndex: 'dEnd',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          width: 200,
          showOverflowTooltip: true
        },
        {
          title: '本次使用金额',
          dataIndex: 'nuseAmtNow',
          sorter: true,
          filter: true,
          precision: 2,
          editable: true,
          editType: 'number',
          defaultEditable: true,
          filterType: 'number'
        },
        {
          title: '总使用金额',
          dataIndex: 'nuseAmt',
          sorter: true,
          filter: true,
          editType: 'number',
          precision: 2,
          showOverflowTooltip: true,
          filterType: 'number'
        },
        {
          title: '余额',
          dataIndex: 'balance',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'number'
        },
        {
          title: '使用标识',
          dataIndex: 'cuse',
          sorter: true,
          filter: true,
          filterType: 'radio',
          filterItems: [
            { text: '启用', value: '0' },
            { text: '停用', value: '1' }
          ],
          editable: true,
          defaultEditable: true,
          disabled: true,
          editType: 'CHECKBOX',
          options: {
            trueValue: '1',
            falseValue: '0'
          }
        },
        {
          title: '类别',
          dataIndex: 'vtype',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input',
          render: params => {
            let statusName = '';
            switch (params.row.vtype) {
              case '90031001':
                statusName = '工时';
                break;
              case '90031002':
                statusName = '备件';
                break;
              case '90031003':
                statusName = '精品';
                break;
              case '90031004':
                statusName = '通用';
                break;
            }
            return <span>{statusName}</span>;
          }
        },
        {
          title: '备注',
          dataIndex: 'vremark',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '是否可编辑本次金额',
          dataIndex: 'useCouPonSpace',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'CHECKBOX',
          hidden: false,
          options: {
            trueValue: '1',
            falseValue: '0'
          }
        }
      ];
    },
    createBaseTable() {
      this.BaseTable = this.$refs.table.$refs.pageTable;
    },
    // 同步表格数据
    saveTdableList(val) {
      if (val.length > 0) {
        console.log('saveTdableList', this.BaseTable);
        for (const item of val) {
          if (item.useCouPonSpace == 0) {
            item.nuseAmtNow = item.balance;
            this.BaseTable.SET_CELL_DISABLED(item, 'nuseAmtNow', true);
          } else {
            this.BaseTable.SET_CELL_DISABLED(item, 'nuseAmtNow', false);
          }
        }
      }
    },
    // 点击搜索或者重置
    async hanldeSearch(e) {
      this.queryParam.xhrAbort = true;
      console.log(e, 'e');
      // console.log(this.queryParam, 'this.queryParam');
      this.queryParam = Object.assign(this.queryParam, {
        xhrAbort: false,
        ...e
      });
      console.log(this.queryParam, 'this.queryParam');
    },
    // table选择变化
    handleRowSelectChange(e) {
      this.selectedRowData = e;
      // 工时券本次使用金额
      let gsqbctotal = 0;
      // 工时券总使用金额
      let gsqzsyTotal = 0;
      // 材料券本次使用金额
      let clbctotal = 0;
      // 材料券总使用金额
      let clqzsyTotal = 0;
      // 精品券本次使用金额
      let jpbctotal = 0;
      // 精品券总使用金额
      let jpqzsyTotal = 0;
      // 通用券本次使用金额
      let tyqbctotal = 0;
      // 通用券总使用金额
      let tyqzsyTotal = 0;

      this.selectedRowData.map(item => {
        console.log(item.vtype, '代码是啥啊');
        if (item.vtype == '90031004') {
          tyqbctotal = Number(item.nuseAmtNow) + Number(tyqbctotal);
          tyqzsyTotal = Number(item.nuseAmt) + Number(tyqzsyTotal);
        } else if (item.vtype == '90031001') {
          gsqbctotal = Number(item.nuseAmtNow) + Number(gsqbctotal);
          gsqzsyTotal = Number(item.nuseAmt) + Number(gsqzsyTotal);
        } else if (item.vtype == '90031002') {
          clbctotal = Number(item.nuseAmtNow) + Number(clbctotal);
          clqzsyTotal = Number(item.nuseAmt) + Number(clqzsyTotal);
        } else if (item.vtype == '90031003') {
          jpbctotal = Number(item.nuseAmtNow) + Number(jpbctotal);
          jpqzsyTotal = Number(item.nuseAmt) + Number(jpqzsyTotal);
        }
      });
      // 工时券本次使用金额
      this.formList.find(item => item.fieldName == 'gsqbc').initialValue = gsqbctotal;
      // 工时券总使用金额
      this.formList.find(item => item.fieldName == 'gsqzsy').initialValue = gsqzsyTotal;
      // 材料券本次使用金额
      this.formList.find(item => item.fieldName == 'clqbc').initialValue = clbctotal;
      // 材料券总使用金额
      this.formList.find(item => item.fieldName == 'clqzsy').initialValue = clqzsyTotal;
      // 精品券本次使用金额
      this.formList.find(item => item.fieldName == 'jpqbc').initialValue = jpbctotal;
      // 精品券总使用金额
      this.formList.find(item => item.fieldName == 'jpqzsy').initialValue = jpqzsyTotal;
      // 通用券本次使用金额
      this.formList.find(item => item.fieldName == 'tyqbc').initialValue = tyqbctotal;
      // 通用券总使用金额
      this.formList.find(item => item.fieldName == 'tyqzsy').initialValue = tyqzsyTotal;
      // 合计券本次使用金额
      this.formList.find(item => item.fieldName == 'hjqbc').initialValue = gsqbctotal + clbctotal + jpbctotal + tyqbctotal;
      // 合计券总使用金额
      this.formList.find(item => item.fieldName == 'hjqzsy').initialValue = gsqzsyTotal + clqzsyTotal + jpqzsyTotal + tyqzsyTotal;
    },
    // 点击确定
    async handleConfirm() {
      console.log(this.formList.find(item => item.fieldName == 'hjqbc').initialValue, '本次总的确定');
      console.log(this.vin.BALANCE_NO, '结算单号');
      if (this.selectedRowData.length > 0) {
        this.selectedRowData[0].balenceNo = this.vin.BALANCE_NO;
      }
      console.log('wjf===============');
      console.log(this.selectedRowData);
      let ddd = await updateCouponSaveList(this.selectedRowData);
      this.$emit('onConfirm', {
        coupon: this.formList.find(item => item.fieldName == 'hjqbc').initialValue
      });
      this.handleCancle();
    },
    cellChangeHanle(cell, row) {
      let nuseAmtNow = Number(row.nuseAmtNow);
      let ye = Number(row.ye);
      if (ye < nuseAmtNow) {
        row.nuseAmtNow = 0;
        this.$notify.error({ title: '提示信息', message: '本次使用金额不能大于余额,请重新输入!' });
        return false;
      }
    },
    // 点击取消
    handleCancle() {
      this.$emit('close2');
    },

    formChangeHandle() {},
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '工时券本次金额',
          fieldName: 'gsqbc',
          disabled: true,
          initialValue: '0'
        },
        {
          type: 'INPUT',
          label: '工时券总使用金额',
          fieldName: 'gsqzsy',
          disabled: true,
          initialValue: '0'
        },
        {
          type: 'INPUT',
          label: '材料券本次金额',
          fieldName: 'clqbc',
          disabled: true,
          initialValue: '0'
        },
        {
          type: 'INPUT',
          label: '材料券总使用金额',
          fieldName: 'clqzsy',
          disabled: true,
          initialValue: '0'
        },
        {
          type: 'INPUT',
          label: '精品券本次金额',
          fieldName: 'jpqbc',
          disabled: true,
          initialValue: '0'
        },
        {
          type: 'INPUT',
          label: '精品券总使用金额',
          fieldName: 'jpqzsy',
          disabled: true,
          initialValue: '0'
        },
        {
          type: 'INPUT',
          label: '通用券本次金额',
          fieldName: 'tyqbc',
          disabled: true,
          initialValue: '0'
        },
        {
          type: 'INPUT',
          label: '通用券总使用金额',
          fieldName: 'tyqzsy',
          disabled: true,
          initialValue: '0'
        },
        {
          type: 'INPUT',
          label: '合计券本次金额',
          fieldName: 'hjqbc',
          disabled: true,
          initialValue: '0'
        },
        {
          type: 'INPUT',
          label: '合计券总使用金额',
          fieldName: 'hjqzsy',
          disabled: true,
          initialValue: '0'
        }
      ];
    },
    // wjf 2020年1月4日
    async vinInformation() {
      const vin = this.orderChangeColumns[0].VIN;
      const roNo = this.orderChangeColumns[0].RO_NO;
      // const res = await vinInformationTrigger(vin, roNo);
      // this.vipRow = res.data;
      // this.$emit('selectRow', this.orderChangeColumns[0],this.vipRow);
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
